<template>
  <el-button ref="compRef" v-model="value" v-bind="{ ...$props, ...$attrs }">
    <template #[slotName]="slotProps" v-for="(_slot, slotName) in $slots">
      <slot :name="slotName" v-bind="slotProps" :key="slotName"></slot>
    </template>
  </el-button>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ButtonProps } from "element-plus";
import { BaseButtonExpose } from "./types";
interface Props extends Partial<ButtonProps> {
  height?: string;
}

withDefaults(defineProps<Props>(), {
  nativeType: "button",
  tag: "button",
});

const value = defineModel();
const compRef = ref();

defineExpose<BaseButtonExpose>({
  // @ts-ignore
  instance: compRef,
});
</script>
<style lang="scss">
.el-button {
  height: 38px;

  &.el-button--small {
    height: 30px;
    padding: 7px 15px;
  }
}
</style>
